<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>05_箭头函数的注意点</title>
</head>

<body>
    <div>点我试试</div>

    <script>
        // MDN文档：箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
        let obj;

        /* 箭头函数从父级作用域中继承this */
        // console.log("this in street",this);//window
        // obj = {
        //     b: {
        //         c: () => { console.log(this) },//就近找一个this（从父级作用域中继承）
        //         d: function(){ console.log(this) },
        //     }
        // }

        // obj.b.d()//obj.b
        // var obj2 = {name:"欧毕节2"}
        // obj2.fn = obj.b.d
        // obj2.fn()
        // obj.b.c()  

        /* 箭头函数中的this只与其定义位置有关 */
        // obj = {
        //     b: {
        //         c: () => { console.log(this) },//就近找一个this（从父级作用域中继承）
        //         d: function(){ console.log(this) },
        //     }
        // }
        // var obj2 = {name:"doraemon"}
        // obj2.fn = obj.b.c
        // obj2.fn()

        /* 从普通函数中继承this */
        // obj = {
        //     name:"obj",
        //     a: function () {
        //         // console.log(this)//obj

        //         // 箭头函数中的this
        //         // var fn = ()=>{console.log("this in timer",this)};//obj
        //         // fn()

        //         // 1000毫秒后 由window回调任务函数（常规函数） 因此调用的主语是window
        //         window.setTimeout(
        //             function(){console.log("this in timeout1",this)},//window
        //             1000
        //         )

        //         // 1000毫秒后 回调箭头函数
        //         window.setTimeout(
        //             ()=>{console.log("this in timeout2",this)},//obj
        //             1000
        //         )
        //     }
        // }
        // obj.a()


        /* 从常规事件函数中继承this */
        // const div = document.querySelector("div");
        // div.onclick = function (e) {
        //     //    指向事件源
        //     console.log(this); //div

        //     // 从onclick中继承
        //     const fun = () => {
        //         console.log(this);//div
        //     };
        //     fun();
        // };

        /* 箭头函数作为事件处理函数 */
        // const div = document.querySelector("div");
        // div.onclick = (e) => {
        //     console.log("this in arrow",this);//从最外层作用域继承this=>window
        // }


        // 普通函数可以通过arguments获取全部实参
        // var fn5 = function () {
        //     console.log(arguments);
        // };
        // fn5(1, 2, 3, 4, 5, 6);

        // 箭头函数里没得argumengts
        // const fn6 = () => {
        //     console.log(arguments); //Uncaught ReferenceError: arguments is not defined
        // };
        // fn6(1, 2, 3, 4, 5, 6);

        /* arguments的替代方案 使用不定长参数手动接收所有参数 */
        const fn7 = (...args) => {
            console.log(args); 
        };
        fn7(1, 2, 3, 4, 5, 6);

    </script>
</body>

</html>